<template>
  <div class="errTool">
    <p class="title"
      >{{ zpDataFlag ? '正评' : '试评' }}阶段异常：{{ toolSpinfo.ycRecordCount || 0 }} 条</p
    >
    <div ref="chartDom"> </div>
  </div>
</template>

<script setup lang="ts">
import { getYcAboutInfo } from '/@/api/teacher'
import { ref, onMounted } from 'vue'
const toolSpinfo = ref<any>({})

const props = defineProps({
  zpDataFlag: {
    type: Boolean,
    default: true,
  },
})

import * as echarts from 'echarts'

const data = [
  {
    name: '评阅上报',
    value: 0,
  },
  {
    name: '系统监测',
    value: 0,
  },
]

const data1 = [
  {
    name: '已处理',
    value: 0,
    itemStyle: { color: '#cccccc' },
  },
  {
    name: '待处理',
    value: 0,
    itemStyle: { color: '#4ade80' },
  },
  {
    name: '处理中',
    value: 0,
    itemStyle: { color: '#16a34a' },
  },
]

const label = {
  alignTo: 'edge',
  formatter: '{name|{b}}\n{time|{c}条}',
  minMargin: 5,
  edgeDistance: 10,
  lineHeight: 15,
  rich: {
    time: {
      fontSize: 15,
      color: '#333',
    },
  },
}
const option = {
  tooltip: {
    trigger: 'item',
  },
  title: [
    {
      subtext: '异常来源',
      left: '25%',
      top: '85%',
      textAlign: 'center',
    },

    {
      subtext: '异常状态',
      left: '75%',
      top: '85%',
      textAlign: 'center',
    },
  ],
  series: [
    {
      type: 'pie',
      radius: '50%',
      center: ['50%', '40%'],
      data: data,
      label,
      left: 0,
      right: '50%',
      top: 0,
      bottom: 0,
    },

    {
      type: 'pie',
      radius: '50%',
      center: ['50%', '40%'],
      data: data1,
      label,
      left: '50%',
      right: 0,
      top: 0,
      bottom: 0,
    },
  ],
}

const chartDom = ref<any>()
const myChart = ref<any>()
onMounted(() => {
  getErrSpinfo()
})
const getErrSpinfo = () => {
  getYcAboutInfo({ zpDataFlag: props.zpDataFlag }).then(res => {
    toolSpinfo.value = res.data
    data[0].value = res.data.customCreateCount || 0
    data[1].value = res.data.systemCreateCount || 0
    data1[0].value = res.data.yclCount || 0
    data1[1].value = res.data.dclCount || 0
    data1[2].value = res.data.clzCount || 0
    myChart.value = echarts.init(chartDom.value)
    option && myChart.value.setOption(option)
  })
}
</script>

<style scoped lang="less">
.errTool {
  width: 49%;
  margin-right: 0.8%;
  background: #f5f6fb;
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #e6ebf5;

  div {
    width: 100%;
    height: 200px;
  }

  .title {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #3f4355;
  }
}
</style>
